<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
    <style>
        .ball{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="快到碗里来" @click = "flag = !flag">
        <!-- 1.使用transition将小球包裹  -->
        <transition
          @before-enter = "beforeEnter"
          @enter = "enter"
          @after-enter = "afterEnter">
            <div class="ball" v-show = "flag"></div>
        </transition>
    </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag: false
            },
            methods: {
                // 注意:动画钩子函数的第一个参数:el ,表示要执行的那个元素是个原生的js对象
                //可认为 el是通过 docuemnt.querySelect('')获取的对象
                beforeEnter(el){
                    //表示动画入场之前，尚未开始，可以在其中设置元素动画开始前的起始位样式
                    //这是设置小球开始动画之前的其实位置
                    el.style.transform = "translate(0, 0)"
                },
                enter(el, done) {
                    //这句话没有实际作用，但是不写，出不来动画效果，可认为 el.offsetWidth会 强制刷新
                    el.offsetWidth
                    //表示动画动画开始之后的样式，可以设置小球动画完成之后的结束状态
                    el.style.transform = "translate(150px, 450px)"
                    el.style.transition = "all 1s ease"

                    //这里的done，其实就是 afterEnter这个函数， 也就是说done也就是 afterEnter的引用 
                    done()
                },
                afterEnter(el) {
                    //动画完成之后会调用afterEnter
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>
</html>